import React, { useState, useMemo } from 'react';
import {
  DataSet,
  Button,
  Table,
  Row,
  Col,
} from 'choerodon-ui/pro';

import { TableListDataSetConfig } from './store';
import styles from './index.less';

const { Column } = Table;

function aggregationRendereer({ text, record }) {
  return (
    <Row>
      <Col span={6}>{record.get('email')}</Col>
      <Col span={18}>{text}</Col>
    </Row>
  );
}

function renderColumnHeader(dataset, name) {
  const field = dataset.getField(name);
  return <span style={{ fontWeight: 'bold' }}>{field ? field.get('label') : ''}</span>;
}

const App = (props: any) => {
  const {
    setEventFunction, // 定义内置函数
    handleRunEvent, // 执行事件流
    handleChangeOutputParams, // 修改出参
    // 入参
    boCode,
    openCreate,
    import: importData,
    export: exportData,
    openEdit,
    openDetail,
    openItemDetail,
    opHis,
  } = props;
  debugger;
  const [aggregation, setAggregation] = useState(true);

  const ds = useMemo(() => {
    return new DataSet(TableListDataSetConfig(boCode || 'SRQC_ORDER'));
  }, []);

  /**
   * 执行事件流
   */
  const handleCreate = () => {
    handleRunEvent(openCreate?.flowCode);
  };

  const handleAggregationChange = aggregation => {
    setAggregation(aggregation);
  };

  const handleOpHis = (record) => {
    handleChangeOutputParams({
      property: 'id',
      data: record.get('id'),
    });
    handleRunEvent(opHis?.flowCode);
  };

  const buttons = [
    <Button
      key="aggregation"
      onClick={() => handleAggregationChange(!aggregation)}
      funcType={'raised'}
      style={{
        background: '#fff',
        color: '#0840f8',
        borderRadius: 13,
      }}
      color="primary"
    >
      {aggregation ? '平铺' : '聚合'}
    </Button>,
    <Button key='create' funcType={'raised'} onClick={handleCreate} style={{ borderRadius: 13 }}>
      新建请求单
    </Button>,
    'delete',
    <Button key='create' funcType={'raised'} onClick={() => handleRunEvent(openItemDetail?.flowCode)} style={{ borderRadius: 13 }}>
      查看物料明细
    </Button>,
    <Button key='import' funcType={'raised'} onClick={() => handleRunEvent(importData?.flowCode)} style={{ borderRadius: 13 }}>
      导入
    </Button >,
    <Button key='export' funcType={'raised'} onClick={() => handleRunEvent(exportData?.flowCode)} style={{ borderRadius: 13 }}>
      导出
    </Button>,
  ];
  const command = ({record}) => [
    <Button key="edit" funcType="link" onClick={() => handleRunEvent(openEdit?.flowCode)}>
      编辑
    </Button>,
    <Button key="edit" funcType="link" onClick={() => handleRunEvent(openDetail?.flowCode)}>
      详情
    </Button>,
    'delete',
    <Button key="opera" funcType="link" onClick={() => handleOpHis(record)}>
      处理历史
    </Button>,
  ];
  return (
    <div className={styles.overrideTable}>
      <Table
        buttons={buttons}
        buttonsLimit={3}
        customizable
        customizedCode="aggregation"
        key="user"
        dataSet={ds}
        columnDraggable
        columnTitleEditable
        aggregation={aggregation}
        onAggregationChange={handleAggregationChange}
        virtualCell
        queryBar={'filterBar' as any}
      >
        <Column
          name="documentNum"
          header={renderColumnHeader}
          style={{ color: '#0840f8' }}
          tooltip="overflow"
          width={200}
          minWidth={150}
          lock
          sortable
          renderer={({ value }) => {
            return <a onClick={() => handleRunEvent(openDetail?.flowCode)}>{value}</a>
          }}
        />
        <Column
          header={() => (
            <span style={{ fontWeight: 'bold' }}>
              基本信息
            </span>
          )}
          align="left"
          aggregation
          key="basic-group"
          aggregationDefaultExpandedKeys={[
            'basic-subgroup-1',
            'basic-subgroup-2',
          ]}
        >
          <Column
            header={() => (
              <span style={{ color: '#0840f8', fontWeight: 'bold' }}>
                请求单信息
              </span>
            )}
            key="basic-subgroup-1"
          >
            <Column
              name="status"
              // editor
              width={200}
            // sortable
            // footer={renderColumnFooter}
            />
            {/* <Column
              name="sourceDocNum"
              lock
              hiddenInAggregation={record => record.index === 0}
            // editor={
            //   <AutoComplete
            //     onFocus={this.handeValueChange}
            //     onInput={this.handeValueChange}
            //     options={this.options}
            //   />
            // }
            /> */}
            {/* <Column
              name="sourceDocTypeCode"
              lock
            // hiddenInAggregation={(record) => record.index === 0}
            // editor={
            //   <AutoComplete
            //     onFocus={this.handeValueChange}
            //     onInput={this.handeValueChange}
            //     options={this.options}
            //   />
            // }
            /> */}
          </Column>
          <Column
            header={() => (
              <span style={{ color: '#0840f8', fontWeight: 'bold' }}>
                创建信息
              </span>
            )}
            key="basic-subgroup-2"
            style={{ color: '#0840f8', fontWeight: 'bold' }}
          >
            <Column
              name="realName"
              // editor
              width={200}
              minWidth={50}
              lock
              tooltip="overflow"
            />
            <Column
              name="creationDate"
              // editor={<TextArea />}
              width={200}
            // sortable
            />
          </Column>
        </Column>
        <Column
          // header="请求信息"
          header={() => (
            <span style={{ fontWeight: 'bold' }}>
              请求信息
            </span>
          )}
          align="center"
          aggregation
          renderer={aggregationRendereer}
          key="code-group"
          aggregationLimitDefaultExpanded
        >
          <Column name="customerFeedback" width={150} sortable />
          {/* <Column name="sourceTypeCode" width={150} tooltip="overflow" /> */}
          {/* TODO: jixu */}
          <Column name="engineNumber" width={150} />
          <Column name="customerName" width={150} />
          <Column name="customerMobile" width={150} />
          {/* <Column name="customerEmail" width={150} /> */}
          <Column name="acceptTypeCode" width={150} />
          {/* <Column name="companyName" width={150} /> */}
          <Column name="serviceTypeCode" width={150} />
          {/* 业务板块 */}
          <Column name="businessSectorName" width={150} />
          <Column name="requestTypeCode" width={150} />
          {/* <Column name="productModel" width={150} /> */}
          {/* <Column name="amount" width={150} /> */}
        </Column>
        <Column
          // header="委派信息"
          header={() => (
            <span style={{ fontWeight: 'bold' }}>
              委派信息
            </span>
          )}
          align="left"
          aggregationLimit={2}
          aggregation
          key="sex-group"
          aggregationLimitDefaultExpanded
        // aggregationLimitDefaultExpanded={(record) =>
        //   record.get('sex') === 'M'
        // }
        >
          {/* <Column name="purposeCode" width={150} /> */}
          {/* <Column name="levelCode" width={150} /> */}
          {/* 服务站、办事处、子公司 */}
          <Column name="serviceStationName" width={150} />
          <Column name="officeName" width={150} />
          {/* <Column name="subCompanyName" width={150} /> */}

          <Column name="acceptOpinions" width={150} />
        </Column>
        <Column
          // header="时间信息"
          header={() => (
            <span style={{ fontWeight: 'bold' }}>
              时间信息
            </span>
          )}
          align="left"
          aggregation
          key="date-group"
          aggregationLimitDefaultExpanded
        >
          <Column name="requestStartDate" width={150} />
          <Column name="requestEndDate" width={150} />
          <Column name="serviceAssignDate" width={150} />
          {/* <Column name="serviceStationReceiveDate" width={150} /> */}
          {/* <Column
              header={() => (
                <span style={{ fontWeight: 'bold', background: 'skyblue' }}>
                  时间
                </span>
              )}
              name="time"
              // editor={<DateTimePicker />}
              width={150}
            /> */}
        </Column>
        {/* <Column name="numberMultiple" editor width={150} minWidth={50} />
        <Column name="frozen" editor width={50} minWidth={50} lock="right" /> */}
        <Column
          // header="操作"
          header={() => (
            <span style={{ fontWeight: 'bold' }}>
              操作
            </span>
          )}
          width={280}
          minWidth={50}
          lock="right"
          command={command}
          align={aggregation ? 'left' : 'center'}
        />
      </Table>
    </div>
  );
};

export default App;
